<div zf-type="setting"><!-- zf-type标记是设置页面的聚焦缩放。因为预览里的聚焦缩放跟设置里界面不一样 -->
    <div id="zf_zoom" class="ui-form-item">
        <label class="ui-label fn-width50" t="W_zoom" name="desc"><!-- Zoom --></label>
        <span class="ui-text fn-textright fn-width60" t="w_wide" name="desc"><!-- WIDE --></span>
        <div class="fn-left fn-width270" id="zfz_slider"></div>
        <span class="ui-text fn-width60 fn-padl4" t="w_tele" name="desc"><!-- TELE --></span>
        <label class="ui-label fn-width40" t="w_Step"><!-- Speed --></label>
        <select class="ui-select fn-width80" id="zfz_step">
            <option value=1>1</option>
            <option value=5>5</option>
            <option value=20>20</option>
        </select>
    </div>
    <div id="zf_focus" class="ui-form-item fn-mart10 ">
        <label class="ui-label fn-width50" t="W_focus" name="desc"><!-- Focus --></label>
        <span class="ui-text fn-textright fn-width60" t="w_near" name="desc"><!-- NEAR --></span>
        <div class="fn-left fn-width270" id="zff_slider"></div>
        <span class="ui-text fn-width60 fn-padl4" t="w_far" name="desc"><!-- FAR --></span>
        <label class="ui-label fn-width40" t="w_Step"><!-- Speed --></label>
        <div class="fn-left">
            <select class="ui-select fn-width80" id="zff_step">
                <option value=1>1</option>
                <option value=5>5</option>
                <option value=20>20</option>
            </select>
        </div>
        <div class="fn-left">
            <a href="javascript:;" class="u-button" id="zff_AutoFocus">
                <i class="ui-button-icon-fouse">&nbsp;</i>
                <label t="w_autoFocus"><!-- 自动聚焦 --></label>
            </a>
        </div>                 
    </div>
    <div class="ui-button-box fn-padt10">
        <a href="javascript:;" class="u-button" id="zf_Restory" t="w_restoryAll"><!-- 全部重置 --></a>
        <a href="javascript:;" class="u-button" id="zf_Refresh" t="w_Refresh"><!-- 刷新 --></a>
    </div>    
</div>
<div zf-type="preview">
    <ul class="u-tab one fn-marb10 fn-border-top-radius">
        <li id="zf_title" data-for="zf_zoomfocus" class="fn-border-top-radius"><!-- Zoom and Focus --></li>
    </ul>
    <div class="u-tab-content fn-pad0">
        <div class="tab-panel fn-padl3 fn-padt5" data-page="zf_zoomfocus">
            <div id="zf_zoom">
                <div class="main-focus-item fn-clear">
                    <div t="W_zoom" class="fn-left"><!-- Zoom --></div>
                    <div class="fn-right fn-marr6">
                        <label t="w_Step"><!-- Speed --></label>
                        <select class="fn-width60" id="zfz_step">
                            <option value=1 >1</option>
                            <option value=5 >5</option>
                            <option value=20 >20</option>
                        </select>
                    </div>
                </div>
                <div class="fn-width144 fn-marr5" id="zfz_slider"></div>
                <div class="main-focus-text fn-clear">
                    <span t="w_wide" class="fn-left" name="desc"><!-- WIDE --></span>
                    <span t="w_tele" class="fn-right" name="desc"><!-- TELE --></span>
                </div>
            </div>
            <div id="zf_focus">
                <div class="main-focus-item fn-clear">
                    <div t="W_focus" class="fn-left"><!-- Focus --></div>
                    <div class="fn-right fn-marr6">
                        <label t="w_Step"><!-- Speed --></label>
                        <select class="fn-width60" id="zff_step">
                            <option value=1 >1</option>
                            <option value=5 >5</option>
                            <option value=20 >20</option>
                        </select>
                    </div>
                </div>
                <div class="fn-width144 fn-marr5" id="zff_slider"></div>
                <div class="main-focus-text fn-clear">
                    <span t="w_near" class="fn-left" name="desc"><!-- Near --></span>
                    <span t="w_far" class="fn-right" name="desc"><!-- Far --></span>
                </div>
            </div>
            <a href="javascript:;" class="u-button" id="zff_AutoFocus">
                <i class="ui-button-icon-fouse">&nbsp;</i>
                <label t="w_autoFocus"><!-- 自动聚焦 --></label>
            </a>
            <a href="javascript:;" id="zf_Restory" t="w_restoryAll" class="u-button"><!-- Restore All --></a>
            <a href="javascript:;" id="zf_Refresh" t="w_Refresh" class="u-button"><!-- Refresh --></a>
            <a href="javascript:;" id="zf_Region" t="w_reginFocus" class="u-button" style="display:none;"><!-- 局部聚焦 --></a>
        </div>
    </div>
</div>